<template>
  <div>
    <swiper :options="swiperOptions1">
      <swiper-slide v-for="item in banner" :key="item._id">
        <img class="w-100" :src="item.img" alt />
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right" slot="pagination"></div>
    </swiper>
    <!-- end of swiper -->
    <div class="nav-icons bg-white mt-3 pt-3 text-center text-dark-1">
      <div class="d-flex flex-wrap" v-show="iconcontent==='收起'">
        <div class="nav-item mb-3" v-for="(item,i) in cardInfo" :key="i">
          <i class="sprite" :class="`sprite-${item.icon}`"></i>
          <div class="py-2">{{item.title}}</div>
        </div>
      </div>
      <div class="d-flex flex-nowrap" v-show="iconcontent==='展开'">
        <div class="nav-item1 mb-3" v-for="(item,i) in cardInfo.slice(0).slice(0,5)" :key="i">
          <i class="sprite" :class="`sprite-${item.icon}`"></i>
          <div class="py-2">{{item.title}}</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm" @click="changeIcon">
        <i class="sprite sprite-arrow mr-1" :class="{rotate:iconcontent==='展开'}"></i>
        {{iconcontent}}
      </div>
    </div>
    <!-- end of nav icons -->
    <m-list-card title="新闻资讯" icon="cc-menu-circle" :categories="newsCats">
      <template v-slot:items="{category}">
        <router-link
          tag="div"
          :to="`/articles/${items._id}`"
          class="py-2 d-flex"
          v-for="(items,i) in category.newsList"
          :key="i"
        >
          <span class="text-info">[{{items.categoryName}}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-3">{{items.title}}</span>
          <span class="text-gary-1 fs-sm">{{items.createdAt | date }}</span>
        </router-link>
      </template>
    </m-list-card>
    <!-- end of news -->
    <m-list-card
      title="英雄列表"
      icon="card-hero"
      :imgurl="herobanner"
      :categories="heroCats"
    >
      <template v-slot:items="{category}">
        <div class="d-flex flex-wrap" style="margin:0 -0.5rem">
          <router-link
            tag="div"
            :to="`/heroes/${items._id}`"
            class="p-2 text-center"
            style="width:20%"
            v-for="(items,i) in category.heroList"
            :key="i"
          >
            <img class="w-100" :src="items.avatar" alt />
            <div class="text-info">{{items.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
    <m-list-card title="精彩视频" icon="video" :categories="videoCats">
      <template v-slot:items="{category}">
        <div class="d-flex flex-wrap">
          <router-link
            tag="div"
            to="/error"
            class="p-2"
            style="width:50%"
            v-for="(item,i) in category.videoList"
            :key="i"
          >
            <img class="w-100" :src="item.bgImg" alt />
            <p>{{item.title}}</p>
            <div class="d-flex jc-between">
              <span>{{item.desc}}</span>
              <span>{{item.updatedAt | date}}</span>
            </div>
          </router-link>
        </div>
      </template>
    </m-list-card>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    }
  },
  data() {
    return {
      swiperOptions1: {
        pagination: {
          el: ".swiper-pagination"
        },
        loop: true,
        autoplay:true
      },
      //$$('.news_list .title').map(a=>a.innerHTML).slice(5)
      /* JSON.stringify($$('.hero-nav>li').map((li,i)=>{
        return{
        name:li.innerText,
        heroes:$$('li',$$('.hero-list')[i]).map(el=>{
            return{
            name:$$('h3',el)[0].innerHTML,
            avatar:$$('img',el)[0].src
        }})}}))*/
      newsCats: [],
      heroCats: [],
      videoCats: [],
      banner: [],
      newhero:[],
      herobanner:'',
      iconcontent: "展开",
      cardInfo: [
        { title: "爆料站", icon: "people" },
        { title: "故事站", icon: "book" },
        { title: "周边商城", icon: "shop" },
        { title: "同人社区", icon: "music" },
        { title: "王者营地", icon: "shield" },
        { title: "新人专区", icon: "sign" },
        { title: "荣耀传承", icon: "scroll" },
        { title: "体验服", icon: "fold" },
        { title: "礼物中心", icon: "gift" },
        { title: "版本介绍", icon: "star" }
      ],
      videoInfo: [
        { title: "精彩栏目" },
        { title: "英雄攻略" },
        { title: "赛事精品" },
        { title: "赛事视频" }
      ]
    };
  },
  watch: {
    iconcontent() {
      console.log(this.iconcontent);
    }
  },
  created() {
    this.fetchNewsCats(),
    this.fetchHeroCats(),
    this.feachBanner(),
    this.feachNewhero(),
    this.feachVideo();
  },
  methods: {
    changeIcon() {
      if (this.iconcontent === "展开") {
        return (this.iconcontent = "收起");
      } else {
        this.iconcontent = "展开";
      }
    },
    async fetchNewsCats() {
      const res = await this.$http.get("news/list");
      this.newsCats = res.data;
    },
    async fetchHeroCats() {
      const res = await this.$http.get("heroes/list");
      this.heroCats = res.data;
    },
    async feachBanner() {
      const res = await this.$http.get("ads");
      let data = res.data;
      this.banner = data[0].items;
    },
    async feachNewhero() {
      const res = await this.$http.get("newhero");
      this.newhero = res.data;
      this.herobanner=String(this.newhero[0].banner)
    },
    async feachVideo() {
      const res = await this.$http.get("videos");
      let data = res.data[0];
      this.videoInfo.map(items => {
        return (items.videoList = Array(4).fill(data));
      });
      //console.log(this.videoInfo);
      this.videoCats=this.videoInfo
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/variables";
.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, "white");
    &.swiper-pagination-bullet-active {
      background-color: map-get($colors, "info");
    }
  }
}

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .rotate {
    transform: rotate(180deg);
  }
  .nav-item {
    width: 25%;
    border-left: 1px solid $border-color;
    &:nth-child(4n + 1) {
      border-left: none;
    }
  }
  .nav-item1 {
    width: 25%;
    border-left: 1px solid $border-color;
    &:nth-child(5n + 1) {
      border-left: none;
    }
  }
}
</style>